<!-- 学社 - 学社主页 - 课程组件 -->
<template>
  <view class="mt-3">
    <view class="item-card flex items-center" @click="navigate(`/package_square/pages/course/detail?id=${data.class_id}&fromType=society`)">
      <u-image width="240" height="160" border-radius="12" :src="data.curriculum?.cover_image"
        class="mr-3 flex-shrink-0" />
      <view class="flex-1 flex flex-col justify-between h-160 text-single">
        <view class="c-#333 text-28 font-bold text-single">{{ data.curriculum?.class_name }}</view>
        <view>
          <view class="c-#B5B5B5 text-24 text-single mb-1">{{ data.curriculum?.desc }}</view>
          <view class="flex">
            <view class="flex-1 flex items-center text-single"  >
              <u-image width="32" height="32" shape="circle" :src="data.curriculum?.teacher_image" />
              <view class="c-#999 text-26 text-single ml-1">{{ data.curriculum?.teacher_name }}</view>
            </view>
            <view class="flex-shrink-0 flex items-center">
              <image class="w-24 h-26" src="/static/images/home/ic_play.png" />
              <view class="c-#666 text-24 ml-1">{{ data.curriculum?.study_num }}人学习</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni'

defineProps({
  data: Object,
})
</script>

<style lang="scss" scoped>
.item-card {
  padding: 32rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
